<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as ubm from 'ubm';

const app = ref<HTMLElement | null>(null);
let scene: ubm.Scene | null = null;
let layer: ubm.BuildingLayer | null = null;

onMounted(() => {
  if (app.value) {
    scene = new ubm.Scene(app.value, {
      viewingMode: "global",
      background: {
        enableSkybox: true,
        starsEnabled: true,
        environment: {
          weather: {
            type: 'sun',
            date: new Date("Tue Mar 15 2022 20:00:00"),

            precipitation: 0.3
          },
        }
      }
    });

    layer = new ubm.SceneLayer({
      id: 'demo',
      title: 'demo',
      url: 'https://stream.rinkslab.com:8060/stream/i3s/OYFNsphMZp8x/PQAFMFhccQkQ/M00l1gFsB9Q5/FRqtyezozDfK/SceneServer',
    });

    scene.layer.add(layer);

    scene.when(() => {
      layer!.when(() => {
        scene!.goTo({ fullExtent: layer!.fullExtent, tilt: 0}, 
        {
          speedFactor: 2
        });
      });
    })
    .catch((e) => { 
      throw e
     });

  }
});
</script>

<template>
  <div id="scene" ref="app" class="scene-container"></div>
</template>



<style scoped>
.scene-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>

<!--给这个代码添加一个button，点击后能够使model回到最初的位置-->
